/* 获取元素 */
const boxes = document.querySelectorAll(".box");
checkBoxes();
/* 文档视图或者一个元素在滚动时，会触发元素的scroll事件。 */
window.addEventListener("scroll", checkBoxes);

function checkBoxes() {
  const triggerBottom = (window.innerHeight / 5) * 4;

  boxes.forEach((box) => {
    /* 当前元素距离顶部的距离  */
    const boxTop = box.getBoundingClientRect().top;

    if (boxTop < triggerBottom) {
      box.classList.add("show");
    } else {
      box.classList.remove("show");
    }
  });
}
